<template>
  <div id="HomeRecommendView">
      <div v-for="(i,index) in recommends" :key="index" class="recommend-item">
            <a :href="i.link">
              <img :src="i.image" alt="">
              <div>{{i.title}}</div>
            </a>
      </div> 
  </div>
</template>

<script>
export default {
  name: 'HomeRecommendView',
  data () {
   return {
   }
  },
  methods:{
  },

  props: {
    recommends: {
      type: Array,
      default(){
        return []
      }
    },


  }
}
</script>

<style scoped>
   #HomeRecommendView{
     display: flex;
     width: 100%;
     text-align: center;
     font-size: 12px;
     padding: 10px 0 20px 0;
     border-bottom: 8px solid #eee;
   }

   #HomeRecommendView .recommend-item{
     flex: 1;
     
   }
   #HomeRecommendView .recommend-item img{
     width: 70px;
     height: 70px;
     margin: 0 0 2px 0;
     
   }
</style>